<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>TalkJS tutorial</title>
  </head>

  <!-- minified snippet to load TalkJS without delaying your page -->
  <script>
    (function (t, a, l, k, j, s) {
      s = a.createElement("script");
      s.async = 1;
      s.src = "https://cdn.talkjs.com/talk.js";
      a.head.appendChild(s);
      k = t.Promise;
      t.Talk = {
        v: 3,
        ready: {
          then: function (f) {
            if (k)
              return new k(function (r, e) {
                l.push([f, r, e]);
              });
            l.push([f]);
          },
          catch: function () {
            return k && new k();
          },
          c: l,
        },
      };
    })(window, document, []);
  </script>

  <script>
    async function postConversationId(conversationId) {
      // Send conversation id to your backend server
      const response = await fetch("http://localhost:3000/deleteConversation", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ conversationId }),
      });
    }

    Talk.ready.then(function () {
      const me = new Talk.User({
        id: "deleteConversationExampleSupportAgent",
        name: "Alice",
        email: "alice@example.com",
        role: "default",
        photoUrl: "https://talkjs.com/images/avatar-1.jpg",
        welcomeMessage: "Hey there! How can I help?",
      });
      const talkSession = new Talk.Session({
        appId: "<APP_ID>", // replace with your app ID
        me: me,
      });

      const inbox = talkSession.createInbox();
      inbox.mount(document.getElementById("talkjs-container"));
      inbox.onCustomConversationAction("delete", async (event) => {
        await postConversationId(event.conversation.id);
        console.log("Deleted conversation with id:", event.conversation.id);
      });
    });
  </script>

  <body>
    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">
      <i>Loading chat...</i>
    </div>
  </body>
</html>
